<template>
    <div class="container">
      <div id="cesiumContainer"></div>
    </div>
</template>

<script>
  //import {Viewer} from "cesium/Source/Cesium.js"
  //let Cesium = require('cesium/Cesium')//cesium1.6版本以后导入的方式
  //import 'cesium/Widgets/widgets.css'

  export default {
    name: 'cesiumPage',
    data () {
      return {
      }
    },
    mounted () {
      var viewer = new this.Cesium.Viewer('cesiumContainer', {
        //加载在线谷歌地图
        imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
          //url: "http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}"
          url:"http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=f97a2783f41c13109adbcc06bf641973&x={x}&y={y}&l={z}"
        })
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,body,#cesiumContainer {
    width: 100%;
    height: 100%;
    position:absolute;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>
